* {
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: gray;
  // background-color: #fff;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

$ballSize: 30px; //小球尺寸
$containerSize: 500px; //容器尺寸
$ballNumber: 36; //小球的数量
$deg: 360deg / $ballNumber; //每个小球旋转的角度
$animation_duration: 2s; //动画时长

.loading {
  width: $containerSize;
  height: $containerSize;
  position: relative;
  // border: 1px solid #a9a9a9;
  border-radius: 50%;
  .dot {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -$ballSize / 2;
    margin-top: -$ballSize / 2;
    width: $ballSize;
    height: $ballSize;
    // background: #f00;
    transform: translateY(-$containerSize/2);
    perspective: 1000px;
    transform-style: preserve-3d;
  }
}

//循环小球
$i: 0;
@while $i < $ballNumber {
  .dot:nth-child(#{$i + 1}) {
    transform: rotate($deg * $i) translateY(-$containerSize / 2);

    &::before {
      top: -$ballSize;
      // background: #000;
      background-image: linear-gradient(to top, #330867 0%, #30cfd0 100%);
      // box-shadow: -5px -5px 10px #30cfd055, 5px 5px 10px #33086755;
      animation: moveBlack $animation_duration infinite;
    }
    &::after {
      bottom: -$ballSize;
      // background: #fff;
      background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
      // box-shadow: -5px -5px 10px #fed6e355, 5px 5px 10px #a8edea55;
      animation: moveWhite $animation_duration infinite;
    }
    &::before,
    &::after {
      content: "";
      position: absolute;
      width: $ballSize;
      height: $ballSize;
      border-radius: 50%;
      animation-delay: -$animation_duration / $ballNumber * $i * 6;
    }
  }
  $i: $i + 1;
}

@keyframes moveBlack {
  0% {
    animation-timing-function: ease-in;
  }
  25% {
    animation-timing-function: ease-out;
    transform: translate3d(0, 100%, $ballSize);
  }
  50% {
    animation-timing-function: ease-in;
    transform: translate3d(0, 200%, 0);
  }
  75% {
    animation-timing-function: ease-out;
    transform: translate3d(0, 100%, -$ballSize);
  }
}
@keyframes moveWhite {
  0% {
    animation-timing-function: ease-in;
  }
  25% {
    animation-timing-function: ease-out;
    transform: translate3d(0, -100%, -$ballSize);
  }
  50% {
    animation-timing-function: ease-in;
    transform: translate3d(0, -200%, 0);
  }
  75% {
    animation-timing-function: ease-out;
    transform: translate3d(0, -100%, $ballSize);
  }
}
